<template>
  <div>
    <el-container>
      <el-header class="nav1">
        <div class="nav1" :class="navBarFixed == true ? 'navBarWrap1' :''"></div>
      </el-header>


      <el-card class="nav2" :class="navBarFixed == true ? 'navBarWrap2' :''">
        <div style="margin: 0 auto;border: 0 solid red;width: 250px;height: 350px;">
          <div style="position: absolute;left: 70px;">
            <el-avatar :size="160" :src="userRuleForm.avatar"/>
          </div>

          <div style="position: absolute;top: 200px;text-align:center;border: 0 solid blue;width: 250px;height: 100px;">
            <h3 style="left: 145px">{{ userRuleForm.nick }}</h3><br>

            <div style="width: 150px;position: absolute;left:0px;top: 50px;">
              <table style="text-align: center;width: 250px;">
                <tr style="text-align: center">
                  <td>浏览量</td>
                  <td>下载量</td>
                  <td>收藏量</td>
                  <td>点赞量</td>
                </tr>

                <tr style="text-align: center">
                  <td>{{ articleRuleForm.viewCount }}</td>
                  <td>12</td>
                  <td>7</td>
                  <td>{{ articleRuleForm.praiseCount }}</td>
                </tr>

              </table>
            </div>
            <p style="position: absolute;left:1px;top: 150px;text-align: left;font-size: 14px">
              个性标签：{{ userRuleForm.signature }}</p>
          </div>
        </div>
      </el-card>


      <el-card style="width: 1200px;height:600px;position: absolute;left: 320px;top: 60px;">
        <h2 style="text-align: center">{{ articleRuleForm.title }}&nbsp;&nbsp;<button @click="downloadClick">下载</button></h2>
        <br>
        <h4 style="text-align: center">作者：{{ userRuleForm.nick }} | 发布时间：{{ articleRuleForm.gmtCreate }}</h4><br>

        <el-image :src="articleRuleForm.viewPicture" alt="图片未加载"></el-image>

        <mavon-editor
            class="md"
            :value="articleRuleForm.content"
            :subfield="false"
            :defaultOpen="'preview'"
            :toolbarsFlag="false"
            :editable="false"
            :scrollStyle="true"
            :ishljs="true"
        />
      </el-card>
    </el-container>
  </div>
</template>

<script>

export default {
  data() {
    return {
      userRuleForm: {
        id: '',
        avatar: '',
        nick: '',
        gender: 1,
        phone: '',
        signature: '',
        optionsSelect: [],
      },

      articleRuleForm: {
        id: '',
        title: "无数据",
        categoryName: '无数据',
        tagId: 0,
        userId: 0,
        categoryId: 0,
        viewPicture: '',
        tags: [],
        tagName: '',
        content: "",
        praiseCount: '',
        viewCount: '',
        gmtCreate: '',
        gmtCreatePush: '',
        gmtModified: ''
      },
      navBarFixed: false,     // 是否吸顶
      examId: null,
      examRow: {},
      articleCount: '',        // 当前作者发表文章的数量
      id: -1,                  // 页面传值文章id

    };
  },

  methods: {
    /**
     * 查询作者信息
     */
    user(userId) {
      this.axios.get("http://localhost:9090/system/users/getBackFillById?id=" + userId).then((response) => {
        this.userRuleForm = response.data;
      })
    },

    /**
     * 查询文章信息
     */
    article(articleId) {
      this.axios.get("http://localhost:9090/system/articles/selectById?id="+articleId).then((response) => {
        this.articleRuleForm = response.data.data;
        alert(response)
        this.user(response.data.data.userId);
      })
    },

    /**
     * 导航栏置顶
     */
    watchScroll() {
      let scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
      console.log(scrollTop)
      //  当滚动超过 90 时，实现吸顶效果
      if (scrollTop > 100) {
        this.navBarFixed = true;
      } else {
        this.navBarFixed = false;
      }
    },


    /*下载*/
    downloadClick() {
      this.axios.post("http://localhost:9090/download", this.articleRuleForm).then((response) => {
        this.$message({
          type: 'success',
          message: '下载成功!'
        });
      })

      // let link = document.createElement(this.articleRuleForm.title);
      // link.setAttribute('download', '');
      // link.href = './assets/系统常见问题检查表_for研发侧.md';
      // link.click();
    }


  },
  /**
   * 防止用户刷新页面丢失数据
   */
  mounted() {
    window.addEventListener("scroll", this.watchScroll);

  },
  created() {
    let id = this.$route.query.id
    if (id !== undefined && id != null && id > 0) {
      // alert("即将进行修改："+id)
      this.article(id)
    } else {
      window.location.href = "https://www.baidu.com"
    }
  },
}

</script>


<style>

.scroll {
  height: 2000px;
}

.nav1 {
  padding: 13px;
  width: 100%;
  box-sizing: border-box;
  background: #cedebd;
  text-align: center;
}

.nav2 {
  width: 300px;
  height: 400px;
  position: absolute;
  /*left: 200px;*/
  left: 10px;
  top: 60px;
}

.navBarWrap2 {
  position: relative;
  /*left: 200px;*/
  left: 10px;
  top: 120px;
  z-index: 999;
}

.navBarWrap1 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

</style>



